<!--  账务管理————————》  支出列表 -->
<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="4" :lg="4" :md="3" :sm="24">
                  <a-form-item label="订单号">
                    <a-input placeholder="请输入订单号" v-model="queryParam.orderNo"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :xl="4" :lg="4" :md="3" :sm="24">
                  <a-form-item label="支付状态">
                    <j-dict-select-tag
                      placeholder="请选择支付状态"
                      dictCode="bill_pay_status"
                      v-model="queryParam.payStatus"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xl="4" :lg="4" :md="3" :sm="24">
                  <a-form-item label="支付流水号">
                    <a-input placeholder="请输入支付流水号" v-model="queryParam.paySerno" />
                  </a-form-item>
                </a-col>

                <a-col :xl="6" :lg="4" :md="3" :sm="24">
                  <a-form-item label="支付状态改变流程">
                    <j-dict-select-tag
                      placeholder="请选择支付状态改变流程"
                      dictCode="bill_pay_change_reason"
                      v-model="queryParam.payStatusChangeReason"
                    />
                  </a-form-item>
                </a-col>
                <template v-if="toggleSearchStatus">
                  <a-col :xl="4" :lg="4" :md="3" :sm="24" v-show="usertype == 1">
                    <a-form-model-item label="分站：" prop="siteId">
                      <a-select
                        placeholder="请选择分站"
                        v-model="queryParam.siteId"
                        show-search
                        :showArrow="false"
                        allowClear
                        :filter-option="filterSelectOption"
                        @change="changeSiteId"
                      >
                        <a-select-option :value="undefined" selected>请选择分站</a-select-option>
                        <a-select-option v-for="item in siteList" :key="item.id" :value="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="4" :lg="4" :md="3" :sm="24" v-show="usertype == 1 || usertype == 2">
                    <a-form-model-item label="商家：" prop="merchantId">
                      <a-select
                        placeholder="请选择商家"
                        v-model="queryParam.merchantId"
                        show-search
                        :showArrow="false"
                        allowClear
                        :filter-option="merchantIdSelectOption"
                        @change="changeMerchantId"
                        :disabled="!queryParam.siteId"
                      >
                        <a-select-option :value="undefined" selected>请选择商家</a-select-option>
                        <a-select-option v-for="item in merchantList" :key="item.id" :value="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="4" :lg="4" :md="3" :sm="24">
                    <a-form-model-item label="门店：" prop="shopId">
                      <a-select
                        placeholder="请选择门店"
                        v-model="queryParam.shopId"
                        show-search
                        :showArrow="false"
                        allowClear
                        :filter-option="basicIdSelectOption"
                        :disabled="!queryParam.merchantId"
                      >
                        <a-select-option :value="undefined" selected>请选择门店</a-select-option>
                        <a-select-option v-for="item in shoplist" :key="item.id" :value="item.id">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="6" :lg="4" :md="3" :sm="24">
                    <a-form-item label="支付方式（途径）">
                      <j-dict-select-tag
                        placeholder="请选择支付方式（途径）"
                        dictCode="bill_pay_way"
                        v-model="queryParam.payWay"
                      />
                    </a-form-item>
                  </a-col>
                </template>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> -->
                    <a @click="handleToggleSearch" style="margin-left: 8px">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                    </a>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-alert message="该页面缺少的信息：分站名称、商家名称、门店名称；后期需要加！！！切记！！！" type="success">
          </a-alert>
          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              size="middle"
              :scroll="{ x: true }"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              @change="handleTableChange"
            >
              <span slot="action" slot-scope="text, record">
                <a @click="setting(record)">设置</a>
              </span>
            </a-table>
          </div>
          <a-modal
            :title="set.title"
            :visible="set.visibleFlag"
            @cancel="setCancel"
            cancelText="取消"
            okText="确定"
            @ok="setOk"
          >
            <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 13 }">
              <a-row :gutter="24">
                <a-col :xl="24" :lg="24" :md="24" :sm="24">
                  <a-form-item label="支付宝提现姓名">
                    <a-input placeholder="请输入支付宝提现姓名" v-model="set.site.contactPerson"></a-input>
                  </a-form-item>
                  <a-form-item label="支付宝提现账号">
                    <a-input placeholder="请输入支付宝提现账号" v-model="set.site.mobile"></a-input>
                  </a-form-item>
                  <a-form-item label="总部抽成比例">
                    <!--                    <a-input placeholder="请输入总部抽成比例（单位：%）" @change='rateChange' v-model="set.site.sysRakeRate"></a-input>-->
                    <a-input-number
                      :default-value="1"
                      :min="0"
                      :max="100"
                      :formatter="(value) => `${value}%`"
                      :parser="(value) => value.replace('%', '')"
                      v-model="set.site.sysRakeRate"
                      :precision="2"
                    /><span>请填写1到100之间的数字</span>
                  </a-form-item>
                  <a-form-item label="待结算时间">
                    <a-input-number
                      v-model="set.site.settlementTime"
                      :min="1"
                      :max="365"
                      :precision="0"
                      :formatter="(value) => `${value}天`"
                      :parser="(value) => value.replace('天', '')"
                    ></a-input-number>
                    <span>请填写1到365之间的数字</span>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-modal>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JVxeRadioCell from '../../components/JVxeCells/JVxeRadioCell'
import { postAction, getAction } from '../../api/manage'
import store from '@/store'


export default {
  name: 'Outlay',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JVxeRadioCell
    //SiteModal
  },
  data() {
    return {
      description: '支出列表',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '分站',
          align: "center",
          dataIndex: 'siteName',
        },
        {
          title: '商家',
          align: "center",
          dataIndex: 'merchantName',
        },
        {
          title: '门店',
          align: "center",
          dataIndex: 'shopName',
        },
        {
          title: '订单号',
          align: "center",
          dataIndex: 'orderNo',
        },
        {
          title: '支付流水号',
          align: "center",
          dataIndex: 'paySerno',
        },
        {
          title: '支付时间',
          align: "center",
          dataIndex: 'payTime',
        },
        {
          title: '实际支付的金额',
          align: "center",
          dataIndex: 'payAmount',
        },
        {
          title: '支付方式（途径）',
          align: "center",
          dataIndex: 'payWay_dictText',
        },
        {
          title: '账单状态',
          align: "center",
          dataIndex: 'payStatus_dictText',
        },
        {
          title: '支付状态改变流程',
          align: "center",
          dataIndex: 'payStatusChangeReason_dictText',
        }
        // ,
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: "center",
        //   fixed: 'right',
        //   width: "100px",
        //   scopedSlots: { customRender: 'action' },
        // }
      ],
      set: {
        title: '',
        visibleFlag: false,
        site: {
          contactPerson: "",
          mobile: "",
          sysRakeRate: "",
          settlementTime: "",
          id: ""
        }
      },
      // 右侧表头
      url: {
        list: "/finance/bill/list",
        setting: "/site/set",
        allSite: "/merchant/certification/allSite",
        merchantAllList: "/merchant/certification/merchantAllList",
        listAll: "/shop/shopBasic/listAll"
      },
      siteList: [],//分站列表
      merchantList: [], // 商家列表
      shoplist: [],//门店列表
      usertype: undefined
    }
  },
  created() {
    const self = this;
    self.usertype = store.getters.userInfo.userType
    if (self.usertype == 1) {
      self.getallsite()
    } else if (self.usertype == 2) {
      self.queryParam.siteId = store.getters.userInfoSite.id
      self.getallmerchant()
    } else if (self.usertype == 3) {
      self.queryParam.siteId = store.getters.userInfoSite.id
      self.queryParam.merchantId = store.getters.userInfoMerchant.id
      self.getallBasic()
    }
    self.queryParam = JSON.parse(JSON.stringify(self.queryParam))
  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  watch: {

  },
  methods: {
    changeSiteId() {
      this.merchantList = []
      this.shoplist = []
      this.queryParam.merchantId = undefined
      this.queryParam.shopId = undefined
      this.queryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.siteId) {
        this.getallmerchant()
      }
    },
    changeMerchantId() {
      this.shoplist = []
      this.queryParam.shopId = undefined
      this.queryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.merchantId) {
        this.getallBasic()
      }
    },
    // 输入筛选 分站
    filterSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 输入筛选 商铺
    merchantIdSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 输入筛选门店
    basicIdSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 获取所有分站
    getallsite() {
      const self = this;
      self.siteList = []
      getAction(self.url.allSite, {}).then(res => {
        console.log(res)
        if (res.success) {
          self.siteList = res.result
        } else {
          self.$message.warning(res.message);
        }
      })
    },
    // 获取分站下所有商铺
    getallmerchant() {
      const self = this;
      self.merchantList = []
      getAction(self.url.merchantAllList, { siteId: this.queryParam.siteId }).then(res => {
        console.log(res)
        if (res.success) {
          self.merchantList = res.result
        } else {
          self.$message.warning(res.message);
        }
      })
    },
    // 获取分站下当前商铺的所有门店
    getallBasic() {
      const self = this;
      self.shoplist = []
      getAction(self.url.listAll, { merchantId: this.queryParam.merchantId }).then(res => {
        console.log(res)
        if (res.success) {
          self.shoplist = res.result
        } else {
          self.$message.warning(res.message);
        }
      })
    },

    setting(record) {
      this.set.site = record;
      console.log("record--->   ", record)
      this.set.title = "设置分站”" + record.name + "“的提现信息、抽成比例、待结算时间"
      this.set.visibleFlag = true;
    },
    setCancel() {
      this.set.visibleFlag = false;
      this.loadData();
    },
    setOk() {
      const self = this;
      postAction(self.url.setting, self.set.site).then(res => {
        if (res.success) {
          self.set.visibleFlag = false;
          self.$message.success("设置成功！");
          this.loadData();
        } else {
          self.$message.warning(res.message);
        }
      })
    },
    rateChange(e) {
      this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/[^\d.]/g, '');
      this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/\.{2,}/g, '.');
      this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/^\./g, '');
      this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      this.set.site.sysRakeRate = this.set.site.sysRakeRate.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    },

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>